<template>
  <div class="mainBody">
    <div class="dc-LlveDel" v-if="agoDetails">
      <!-- banner -->
      <div class="banner">
        <img
          :src="`https://ss.lanqb.com/${agoDetails.posters.banner}`"
          alt=""
        />
        <div class="bannerTit">
          <h3 class="b-des">{{ agoDetails.title }}</h3>
          <div class="info">
            <p class="people">
              本期嘉宾： {{ agoDetails.cooperator.nickname }}
            </p>
            <p class="livevTime">
              直播时间：
              {{
                agoDetails.begin_at
                  .slice(0, 16)
                  .replace("-", "年")
                  .replace("-", "月")
              }}
            </p>
          </div>
        </div>
      </div>
      <!-- 本期介绍和大触周边 -->
      <div class="tabCon" style="margin-top: 80px">
        <p
          class="item"
          :class="{ actives: curPage == 1 }"
          @click="changePage(1)"
        >
          本期介绍
        </p>
        <p
          class="item"
          :class="{ actives: curPage == 2 }"
          @click="changePage(2)"
        >
          大触周边
        </p>
      </div>
      <div v-if="curPage == 1">
        <!-- 1本期介绍 -->
        <div class="introduction">
          <h3 class="tag">本期介绍</h3>
          <div class="content">{{ agoDetails.introduction }}</div>
          <p class="loading">加载中...</p>
        </div>
        <!-- 1本期大触 -->
        <div class="d-itermBox">
          <div class="d-iterm">
            <div class="d-top">本期大触</div>
            <div class="all-info">
              <div class="avatarBox">
                <div class="avatar">
                  <img
                    :src="`https://ss.lanqb.com/${agoDetails.user.avatar}`"
                    alt=""
                  />
                </div>
                <div class="nickname">{{ agoDetails.user.nickname }}</div>
              </div>
              <div class="d-cons">
                <p class="teaInfo">
                  {{ agoDetails.teacher_info.introduction }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 1大触作品 -->
        <div class="introduction">
          <h3 class="tag">大触作品</h3>
        </div>
        <div class="tbox" v-if="res.pictures">
          <div class="teaWorks" v-for="item in res.pictures" :key="item.id">
            <img :src="`https://ss.lanqb.com/${item.cover_picture}`" alt="" />
          </div>
        </div>
        <!-- 1评论 -->
        <div class="introduction">
          <h3 class="tag">评论</h3>
        </div>
        <div class="comments">
          <textarea name="status" cols="30" rows="6"></textarea>
        </div>
        <p class="login"><b>登录</b>后才能访问哦！</p>
        <p class="datas">没有数据了</p>
      </div>
      <div class="aroundBox" v-else>
        <div class="around" v-if="res.goods">
          <img :src="`https://ss.lanqb.com/${res.goods[0].cover}`" alt="">
          {{ res.goods[0].id }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getCurrentInstance, reactive, ref } from "vue";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;

// 接收上个页面传过来的ids
const route = useRoute();
let curId = route.query.ids;
// console.log(curId);

// 本页面的两个小导航（本期介绍和大触周边）
let curPage = ref(1);
const changePage = (id) => {
  curPage.value = id;
};

let agoDetails = ref(); // 保存本页码数据的变量
let res = reactive({
  pictures: [], // 保存本页码大触作品的图片
  goods: [],
});

// 1
// https://m.lanqb.com/api/daniu/614
$axios(`/lanqb/api/daniu/${curId}`, "GET").then(({ data }) => {
  agoDetails.value = data;
  res.pictures = data.daniu_class_teacher_works;
  // console.log(res.pictures);
});

// 2
$axios(`/lanqb/api/daniu/merch/hot-good-list`).then(({ data }) => {
  res.goods = data.data;
  // console.log("第二", res.goods);
});
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.actives {
  color: #edce8c !important;
  position: relative;
  &::after {
    content: "";
    width: 40px;
    height: 3px;
    background-color: #edce8c;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
  }
}
.mainBody {
  width: 100vw;
  height: calc(100vh - 44px - 40px - 50px);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .dc-LlveDel {
    .banner {
      width: 100%;
      height: 211px;
      img {
        height: 100%;
        display: block;
      }
      .bannerTit {
        padding: 15px;
        width: 100%;
        height: 80px;
        box-sizing: border-box;
        background-color: black;
        position: relative;
        .b-des {
          width: 80vw;
          font-weight: normal;
          font-size: 18px;
          color: #ffffff;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          &::after {
            content: "直播";
            width: 10vw;
            color: #634b19;
            position: absolute;
            right: 15px;
            top: 18px;
            background-color: #edce8c;
            font-size: 12px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 5px;
          }
        }
        .info {
          display: flex;
          margin-top: 10px;
          .people {
            color: #ffffff99;
            font-size: 12px;
          }
          .livevTime {
            margin-left: 20px;
            color: #ffffff99;
            font-size: 12px;
          }
        }
      }
    }
    // 以下是本期介绍和大触周边
    .tabCon {
      height: 50px;
      display: flex;
      .item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    // 本期介绍 公用标题（以及大触作品和评论）
    .introduction {
      padding: 0 10px 15px 10px;
      border-bottom: 1px solid #ccc;
      .tag {
        padding: 0 20px;
        margin: 25px 0 15px 0;
        color: #000000;
        font-size: 15px;
        position: relative;
        &::before {
          content: "";
          width: 5px;
          height: 5px;
          background-color: #edce8c;
          position: absolute;
          left: 10px;
          top: 8px;
        }
      }
      .content {
        color: #434343;
        font-size: 13px;
        margin: 10px 0;
        line-height: 20px;
      }
      .loading {
        width: 355px;
        height: 195px;
        background-color: rgba(36, 47, 50, 0.42);
        color: #ffffff;
        text-align: center;
        line-height: 195px;
        border-radius: 10px;
        font-size: 12px;
      }
    }
    // 本期大触
    .d-itermBox {
      padding: 10px;
      .d-iterm {
        width: 355px;
        height: 276px;
        background: #0e1917;
        background-image: linear-gradient(134deg, #242f32, #0e1917);
        border-radius: 10px;
        position: relative;
        &::after {
          content: "";
          width: 115px;
          height: 110px;
          background-image: url(https://assets-cdn.lanqb.com/imgv3/daniu/dn-det-intro-bg1@2x.png);
          position: absolute;
          top: -20px;
          left: -15px;
          border-radius: 50%;
        }
      }
      .d-top {
        width: 74px;
        height: 24px;
        background: url(https://assets-cdn.lanqb.com/imgv3/image/dc-tagbg_m@2x.png)
          no-repeat 50%;
        color: #634b19;
        font-size: 13px;
        line-height: 24px;
        text-align: center;
        position: absolute;
        top: 10px;
        left: -5px;
      }
      .all-info {
        .avatarBox {
          width: 305px;
          height: 110px;
          border-bottom: 1px solid #eee;
          position: absolute;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          .avatar {
            width: 91px;
            height: 91px;
            border-radius: 50%;
            border: 1px solid #edce8c;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 20px;
            left: 70px;
            img {
              width: 84px;
              height: 84px;
              border-radius: 50%;
            }
          }
          .nickname {
            color: #ffffff;
            position: absolute;
            top: 34px;
            left: 180px;
          }
        }
        .d-cons {
          position: absolute;
          bottom: 20px;
          padding: 0 20px;
          .teaInfo {
            font-size: 13px;
            color: #ffffff99;
          }
        }
      }
    }
    // 大触作品
    .tbox {
      padding: 0 15px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .teaWorks {
        width: 167px;
        height: 125px;
        margin-top: 10px;
        img {
          height: 100%;
        }
      }
    }
    // 评论
    .comments {
      // padding:0 10px
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      textarea {
        width: 90%;
        border: 1px solid #ececec;
        background-color: transparent;
        height: 64px;
      }
    }
    .login {
      padding: 0 15px;
      margin-top: 10px;
      font-size: 14px;
      color: #a4a4a4;
      b {
        font-weight: normal;
        color: #ddb256;
      }
    }
    .datas {
      color: #a1afb5;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }
  // 2导航 大触周边
  .aroundBox{
    .around{
      img{
        width: 170px;
        height: 170px;
        border-radius: 5px 5px 0 0;
      }
    }
  }
}
</style>
